import { FC ,useEffect,useState} from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Row,Col,Card ,Tag , Button} from 'antd';
import MyTitle from "../../components/Title";
import { baseURL } from "../../api/request";

import moment from "moment";
import { annoTypeList } from "../../utils";
import { ajax } from './../../api/index';
const {Meta} = Card  


const AnnoDetail :FC<any>=()=>{
   const [obj,setobj]=useState<any>(null)
   const navigate = useNavigate()
   const params = useParams()
   useEffect(()=>{
       ajax.getannoone({
           _id:params.aid
       }).then(res=>{
           if(res.code==200){
               setobj(res.result)
           }
       })
   },[])

   return(
    <div>
    <Button onClick={()=>navigate(-1)} danger >返回上一级</Button>
    <MyTitle text="公告详情"/>
    <Row style={{marginTop:15}}>
        <Col>
            {
                obj && <Card
                hoverable
                style={{ width: 240 }}
                cover={<img alt="example" height={250} src={obj.desc.replace(/public/,baseURL)} />}
            >   

                <Meta title={obj.title} description={obj.content} />
                    <Tag color={  annoTypeList.find((item:any)=>item.value==obj.type)?.color}> 
                        {annoTypeList.find((item:any)=>item.value==obj.type)?.label}
                    </Tag>
                <p>
                    {obj.info.username}
                </p>
                <p>
                    {moment(obj.time).format("YYYY-MM-DD HH:mm:SS")}
                </p>
            </Card>
            }
        </Col>
    </Row>
</div>
   )
}

export default AnnoDetail